<template>
  <div class="page">
    <div>医院</div>

    <div class="search">
      <div class="search-title">等级：</div>
      <div class="search-item">
        <div
          v-for="item in levelList"
          :key="item.id"
          :class="item.id === levelSelet ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div>
    </div>

    <div class="search">
      <div class="search-title">地区：</div>
      <div class="search-item">
        <div
          v-for="item in regionList"
          :key="item.id"
          :class="item.id === regionSelet ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let levelSelet = ref(0)
let levelList = ref([
  {
    id: 0,
    title: '全部'
  },
  {
    id: 1,
    title: '三级甲等'
  },
  {
    id: 2,
    title: '三级乙等'
  }
])

let regionSelet = ref(0)
let regionList = ref([
  {
    id: 0,
    title: '全部'
  },
  {
    id: 1,
    title: '东城区'
  },
  {
    id: 2,
    title: '西城区'
  },
  {
    id: 3,
    title: '朝阳区'
  }
])
</script>

<style lang="scss" scoped>
.page {
  padding: 0 10px;

  .active {
    color: #5fa4ff;
  }

  .search {
    display: flex;

    .search-title {
      width: 55px;
      white-space: nowrap;
    }

    .search-item {
      display: flex;
      flex-wrap: wrap;

      div {
        margin-left: 10px;
      }
      div:hover {
        color: #55a6fe;
        cursor: pointer;
      }
    }
  }
}
</style>
